<template>
  <div class="adderss-box">
    <img
      src="http://img.zuimeng.net.cn/pay/images/zhifuchenggong@2x.png"
      alt=""
    />
    <div v-if="lang == 'zh'">
      <h2 v-if="type == 6 || type == 7">恭喜您，支付成功！</h2>
      <h2 v-if="type == 8">您已确认收货！</h2>
      <h2 v-if="type == 9">恭喜您，发货成功！</h2>

      <p v-if="type == 6">已成功支付保证金，请按照订单提示进行下一步</p>
      <p v-if="type == 7">已成功支付藏品金额，请等待平台为您发货</p>
      <p v-if="type == 8">对方也确认收货后，交易完成</p>
      <p v-if="type == 9">请耐心等待平台收货后，进入交易下一步</p>

      <div v-if="type != 8 && type != 9" class="btn" @click="goOrder">
        查看交易
      </div>
      <div v-if="type == 8 || type == 9" class="btn" @click="goOrder">
        查看其他交易
      </div>
      <div class="btn2" @click="goIndex">返回首页</div>
    </div>
    <div v-else>
      <h2 v-if="type == 6">Congratulations, payment success！</h2>
      <h2 v-if="type == 8">You have confirmed receipt.</h2>
      <h2 v-if="type == 9">Congratulations on your successful delivery.</h2>

      <p v-if="type == 6">
        The deposit has been successfully paid, please follow the order prompts
        for the next step
      </p>
      <p v-if="type == 7">
        The amount of collection has been successfully paid. Please wait for the
        platform to deliver for you.
      </p>
      <p v-if="type == 8">
        The other party also confirmed that after receiving the transaction, the
        transaction was completed.
      </p>
      <p v-if="type == 9">
        Please be patient and wait for the platform to take delivery.
      </p>

      <div v-if="type != 8 && type != 9" class="btn" @click="goOrder">
        View transactions
      </div>
      <div v-if="type == 8 || type == 9" class="btn" @click="goOrder">
        View transactions
      </div>
      <div class="btn2" @click="goIndex">Back to home</div>
    </div>
  </div>
</template>
<script>
import { postBond, getGoodsDetails } from "@/api/goods";
import { Loading, Toast, Cell, CellGroup, RadioGroup, Radio } from "vant";

export default {
  name: "myordersuccess",
  data() {
    return {
      lang: "zh", //当前网页语言类型 zh 中文  en 英语
      userId: 0, //用户id
      type: 1, //type=1购买，2置换 3、发布藏品
      status: 1, //1购买 0置换
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获得语言类型lang
    if (this.$route.query.lang) {
      this.lang = this.$route.query.lang;
    }
    //获取用户id
    if (this.$route.query.userId && this.$route.query.userId > 0) {
      this.userId = this.$route.query.userId;
      //把用户id存储在缓存
      window.localStorage.setItem("userId", this.userId);
    } else {
      this.userId = window.localStorage.getItem("userId");
    }
    //获得订单类型
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    //获得状态
    if (this.$route.query.status) {
      this.status = this.$route.query.status;
    }
  },
  //
  methods: {
    //返回首页
    goIndex() {
      let para = {};
      para.linkType = "index";
      this.interaction.hLinkToApp(para);
    },
    //返回订单
    goOrder() {
      //返回我的购买
      if (this.status == 1) {
        let para = {};
        let title = "";
        if (this.lang == "zh") title = "我的购买";
        else title = "My Goods";
        para.title = title;
        para.url = "/myBuy?lang=" + this.lang + "&userId=" + this.userId;
        //此时的我的购买页的“返回---跳转至个人中心主页
        para.back = "my";
        console.log(para);
        this.interaction.hLink(para);
      } else if (this.status == 0) {
        let para = {};
        let title = "";
        if (this.lang == "zh") title = "我的置换";
        else title = "My Replacement";
        para.title = title;
        para.url = "/myChange?lang=" + this.lang + "&userId=" + this.userId;
        para.back = "my";
        console.log(para);
        this.interaction.hLink(para);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.adderss-box{
    width :100%;
    height:100%;
    background :#fff;
    text-align:center;
    position:fixed;
    bottom :0;
    img{
        width:1.466667rem;
        height:1.466667rem;
        margin :0 auto;
        margin-top :1.066667rem;
    }
    h2{
        font-family:PingFangSC-Regular;
        font-size:.48rem;
        color:#494949;
        letter-spacing:.006667rem;
        text-align:center;
        margin-top :.266667rem;
        margin-bottom :1.333333rem;
    }
    p{
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        letter-spacing:.005067rem;
        text-align:center;
        line-height:.693333rem;
        padding 0 6%;
    }
    .btn{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
        margin-top :2rem;
    }
    .btn2{
        border :none;
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin-top :.533333rem;
     }
}
</style>
